<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<ul>
		<li id="first">李锐锋穿黑丝</li>
		<li>李锐锋打篮球</li>
		<li id="three">李锐锋过马路</li>
		<li>李锐锋骑自行车</li>
		<li>李锐锋碰瓷老太太</li>
		<li aaa="456">老师decoration写十遍</li>
		<li>
			<span>李锐锋开半挂</span>
			<span>李锐锋耕地</span>
			<span>李锐锋玩溜溜球</span>
		</li>
		<span>李锐锋玩火影</span>
	</ul>

	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		//获取子代元素 ul>span(子代选择器) 
		$('ul').children('span').css("background", "skyblue")

		// 后代选择器 ul span
		$('ul').find('span').css("font-size","30px")

		// 选出除了自己以外的所有兄弟节点
		$("#first").siblings('li').css("color", "green")

		// 获取下一个兄弟节点
		$("#first").next().css("font-weight","900")

		// 获取上一个兄弟节点
		$("#three").prev().css("background", "pink")

		// 获取父亲节点
		$("#three").parent().css("border", "1px soild #000")

		// jq不需要循环 隐式迭代 jq自动遍历循环
		console.log($("li"))
		$("li").click( function() {
			console.log(this)//获取当前点击的元素
			console.log($(this).index())//获取当前点击的下标
		})
	</script>
</body>
</html>